<template>
    <el-cascader v-model="selectedSortRule" :options="options" clearable placeholder="请选择排序方式"  @change="handleSortRuleChange"  />
  </template>
  <script setup>
import { ref, defineEmits } from 'vue';  
const emit = defineEmits(['update:sortRule']);  
const selectedSortRule = ref(null);  
function handleSortRuleChange(value) {  
  emit('update:sortRule', value);  
}  
const options = [
  {
    value: 'price',
    label: '价格',
    children: [
      {
        value: 'price_up',
        label: '价格升序',
      },
      {
        value: 'price_down',
        label: '价格降序',
      },
    ],
  },
  {
    value: 'sell',
    label: '累计销量',
    children: [
      {
        value: 'sell_up',
        label: '累计销量升序',
      },
      {
        value: 'sell_down',
        label: '累计销量降序',
      },
    ],
  },
  {
    value: 'stock',
    label: '库存',
    children: [
      {
        value: 'stock_up',
        label: '库存升序',
      },
      {
        value: 'stock_down',
        label: '库存降序',
      },
    ],
  },
  {
    value: 'time',
    label: '创建时间',
    children: [
      {
        value: 'time_up',
        label: '时间升序',
      },
      {
        value: 'time_down',
        label: '时间降序',
      },
    ],
  },
]
</script>

<style>
.el-input__wrapper {
    background-color: #f2f4f7;
    border-radius: 5px;
    border: 1px solid #dcdfe6; 
    border-radius: 15px;
    height: 40px;
    width: 250px;
}
 .el-input__wrapper:hover {
    background-color: #ffffff;
    border-color: #409eff; 
    transition: background-color 0.3s ease, border-color 0.3s ease; 
}
</style>